<template>
  <el-form ref="form" :model="formData" class="editForm">
    <el-collapse v-model="activeNames">
      <h4>全局设置</h4>
      <el-collapse-item title="展示设置" name="1">
        <el-radio-group v-model="formData.showDevice">
          <el-radio label="all">PC端和手机端</el-radio>
          <el-radio label="desktop">仅PC端</el-radio>
          <el-radio label="mobile">仅手机端</el-radio>
        </el-radio-group>
        <el-form-item label="展示位置" class="editForm-item" style="margin-bottom: 20px;margin-top: 20px">
          <el-select v-model="formData.showLocation" placeholder="位置">
            <el-option label="页面顶部" :value=1></el-option>
            <el-option v-if="formData.showDevice === 1" label="导航栏下方" :value=2></el-option>
            <el-option label="页面底部" :value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否固定" class="editForm-item" style="margin-bottom: 20px">
          <el-select v-model="formData.isFixedLocation" placeholder="是否固定">
            <el-option label="是" :value=1></el-option>
            <el-option label="否" :value=2></el-option>
          </el-select>
        </el-form-item>
      </el-collapse-item>
      <h4>背景</h4>
      <el-collapse-item title="底图" name="9">
        <el-form-item label="底色">
          <el-color-picker
              v-model="formData.baseMap1"
              :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
        <el-form-item label="pc图片" prop="imageUrl" class="no-border pic" style="margin-bottom: 12px">
          <ele-form-upload-plus-file   v-model="formData.imageUrl" />
        </el-form-item>
        <el-form-item label="h5图片" prop="imageUrl" class="no-border pic">
          <ele-form-upload-plus-file   v-model="formData.mobileImageUrl" />
        </el-form-item>
        <el-form-item label="样式" class="editForm-item" style="margin: 20px">
          <el-select v-model="formData.bgStyle" placeholder="样式">
            <el-option label="自适应" value="bg-selfAdaption"></el-option>
            <el-option label="填充" value="bg-fill"></el-option>
            <el-option label="拉伸" value="bg-stretching"></el-option>
            <el-option label="平铺" value="bg-tile"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对齐" class="editForm-item" style="margin: 20px">
          <el-select v-model="formData.bgAlignment" placeholder="对齐">
            <el-option label="居中" value="bg-center"></el-option>
            <el-option label="左上" value="bg-left-top"></el-option>
            <el-option label="右上" value="bg-right-top"></el-option>
            <el-option label="左下" value="bg-left-bottom"></el-option>
            <el-option label="右下" value="bg-right-bottom"></el-option>
          </el-select>
        </el-form-item>
      </el-collapse-item>
      <h4>活动跳转</h4>
      <el-form-item label="" class="editForm-item" prop="link">
        <el-input type="textarea" v-model="formData.link"></el-input>
      </el-form-item>
      <h4>内容</h4>
      <el-collapse-item name="3">
        <template slot="title">
          <div class="collapse-item-nowrap">{{'文本：' + headerText.popupTitle}}</div>
        </template>
        <el-form-item label="" class="editForm-item">
          <quill-editor v-model="formData.popupTitle"
                        ref="myQuillEditor"
                        @ready="onEditorChange($event, 'popupTitle')"
          >
          </quill-editor>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="优惠码" name="8" class="couponCode-collapse">
        <el-form-item label="是否开启">
          <el-switch
              v-model="formData.showCoupon"
              active-color="#1e90ff">
          </el-switch>
        </el-form-item>
        <el-form-item label="选择优惠码" class="editForm-item" style="margin-bottom: 20px">
          <el-select v-model="formData.couponCodeId" placeholder="类型" @change="handleSelectPopupType" :popper-append-to-body="false">
            <el-option label="+新增优惠码" :value=88></el-option>
            <el-option :label="item.activityName" v-for="item in couponCodeList" :value="item.couponCodeId" :key="item.couponCodeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker
              v-model="formData.popupColor"
              :predefine="predefineColors">
          </el-color-picker>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="倒计时" name="13">
        <el-form-item label="是否开启">
          <el-switch
              v-model="formData.showCount"
              active-color="#1e90ff">
          </el-switch>
        </el-form-item>
        <el-form-item label="类型" class="editForm-item" style="margin-bottom: 20px">
          <el-select v-model="formData.countdownType" placeholder="类型">
            <el-option label="固定时长" :value=1></el-option>
            <el-option label="结束时间" :value=2></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" class="editForm-countdown" v-if="formData.countdownType === 1"  style="margin-bottom: 20px">
          <div class="marketing-form-item-control">
            <span class="marketing-form-item-children">
              <div class="justify-contents">
                <el-input v-model="formData.fixedCountdownDay"
                          class="marketing-input justify-contents__item" maxlength="2" type="text" onkeyup="value=value.replace(/\D/g,'')" />
                  <span class="justify-contents__item">天</span>
                  <el-input v-model="formData.fixedCountdownHour"
                            class="marketing-input justify-contents__item" maxlength="2" @input="handleChangeHour"/>
                    <span class="justify-contents__item">小时</span>
                    <el-input v-model="formData.fixedCountdownMinute"
                              class="marketing-input justify-contents__item" maxlength="2" @input="handleChangeMinute"/>
                      <span class="justify-contents__item">分</span>
                      <el-input v-model="formData.fixedCountdownSecond"
                                class="marketing-input justify-contents__item" maxlength="2" @input="handleChangeSecond"/>
                        <span class="justify-contents__item">秒</span>
              </div>
            </span>
          </div>
        </el-form-item>
        <el-form-item label="" v-if="formData.countdownType === 2"  style="margin-bottom: 20px">
          <el-date-picker
              v-model="formData.endCountdownTime"
              :picker-options="pickerOptions"
              value-format="timestamp"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="关闭按钮" name="6">
        <el-form-item label="关闭按钮">
          <el-checkbox v-model="formData.btnChecked">隐藏</el-checkbox>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <el-form-item style="text-align: right;margin-top: 20px">
      <el-button @click="handleResetStyle()">重置样式</el-button>
      <el-button @click="$emit('on-cancel')">取消</el-button>
      <el-button type="primary" @click="onSubmit('form')">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {parseCountDownTimeData, parseTime} from '@/utils/utils';
import {getActivityViewCouponCodeList} from '@/api/marketing';
import configDefaultItems from '_c/theme-editor/config/subscriptionPopus';
export default {
    name: 'Form',
    components: {},
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
        resetStyle: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            couponCodeList: [],
            pickerOptions: {
                disabledDate (time) {
                    let dateTime = new Date();
                    let startDateTime = dateTime.setDate(dateTime.getDate() - 1);
                    return (
                        time.getTime() < new Date(startDateTime).getTime()
                    );
                },
                selectableRange: parseTime(+new Date() + 10 * 60 * 1000, '{h}:{i}:{s}') + ' - 23:59:00'
            },
            // 简单copy数据
            activeNames: [],
            formData: this.$props.value ? JSON.parse(JSON.stringify(this.$props.value)) : {},
            formDataBase: this.$props.value ? JSON.parse(JSON.stringify(this.$props.value)) : {},
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ],
            headerText: {
                popupTitle: '',
                programme: '',
                description: '',
                btnText: ''
            },
            rules: {
                link: [
                    {required: true, message: '请输入活动链接', trigger: 'blur'}
                ]
            }
        };
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    watch: {
        formData: {
            deep: true,
            handler (value) {
                let SECOND = 1000;
                let MINUTE = 60 * SECOND;
                let HOUR = 60 * MINUTE;
                let DAY = 24 * HOUR;
                if (this.formData.countdownType === 2) {
                    this.formData.fixedCountDownTime = this.formData.endCountdownTime - new Date().getTime();
                    const time = parseCountDownTimeData(this.formData.fixedCountDownTime);
                    this.formData.fixedCountdownDay = time.days;
                    this.formData.fixedCountdownHour = time.hours;
                    this.formData.fixedCountdownMinute = time.minutes;
                    this.formData.fixedCountdownSecond = time.seconds;
                } else {
                    this.formData.fixedCountDownTime = this.formData.fixedCountdownDay * DAY + this.formData.fixedCountdownHour * HOUR + this.formData.fixedCountdownMinute * MINUTE + this.formData.fixedCountdownSecond * SECOND;
                }
                this.$emit('input', value);
                this.$emit('on-change', value);
            }
        }
    },
    mounted () {
        this.initCouponCode();
        if (!this.formData.endCountdownTime) {
            this.formData.endCountdownTime = (new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), '23', '59', '59')).getTime();
        }
    },
    methods: {
        initCouponCode () {
            getActivityViewCouponCodeList({
                siteId: this.siteId
            }).then(res => {
                this.couponCodeList = res.data;
                this.handleSelectPopupType();
            });
        },
        handleSelectPopupType () {
            if (this.formData.couponCodeId === 88) {
                this.$router.push({name: 'coupon-codes-add'});
            } else if (this.formData.couponCodeId && this.formData.couponCodeId !== 88) {
                const row = this.couponCodeList.find(res => res.couponCodeId === this.formData.couponCodeId);
                this.formData.couponCodeText = row.couponCode;
                this.formData.startTime = row.startTime;
                this.formData.endTime = row.endTime;
            }
        },
        handleResponse (response, file, fileList) {
            return response;
        },
        onEditorChange (quill, name) {
            this.headerText[name] = quill.container.innerText;
        },
        async onSubmit () {
            await this.$refs.form.validate();
            console.log(this.formData);
            this.$emit('on-submit', this.formData);
        },
        handleChangeHour () {
            let hour = this.formData.fixedCountdownHour;
            if (hour.length === 1) {
                hour = hour.replace(/[^1-9]/g, '');
            } else {
                hour = hour.replace(/\D/g, '');
            }
            this.formData.fixedCountdownHour = Number(hour) > 23 ? 23 : Number(hour);
        },
        handleChangeMinute () {
            let minute = this.formData.fixedCountdownMinute;
            if (minute.length === 1) {
                minute = minute.replace(/[^1-9]/g, '');
            } else {
                minute = minute.replace(/\D/g, '');
            }
            this.formData.fixedCountdownMinute = Number(minute) > 59 ? 59 : Number(minute);
        },
        handleChangeSecond () {
            let second = this.formData.fixedCountdownSecond;
            if (second.length === 1) {
                second = second.replace(/[^1-9]/g, '');
            } else {
                second = second.replace(/\D/g, '');
            }
            this.formData.fixedCountdownSecond = Number(second) > 59 ? 59 : Number(second);
        },
        handleResetStyle () {
            if (this.$props.resetStyle) {
                let datalist = configDefaultItems.filter(v => v.name === 'BulletinBoardCountDown');
                Object.assign(this.formData, datalist[0].value);
            } else {
                Object.assign(this.formData, this.formDataBase);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.editForm{
  overflow: hidden;
}
.game-select {
  .selected {
    height: 32px;
    border-radius: 2px;
    background-color: #eef0f2;
    line-height: 32px;
    display: flex;
    padding-left: 10px;
    align-items: center;

    .value {
      flex: 1;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }

    i {
      width: 32px;
    }
  }
}
.marketing-form-item-control{
  .justify-contents{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .marketing-input{
      width: 60px;
    }
    span.justify-contents__item {
      width: auto;
    }
  }
}
.couponCode-collapse{
  ::v-deep .el-collapse-item__wrap{
    overflow: inherit;
  }
}
</style>
